import { messages } from "share/common";
import React from "react";
import { connect } from "react-redux";
import { Button, Modal } from "antd";
import StopAnnounceService from "components/template/stop-annonuce/stop-annonuce.service";
import "styles/main/components/questionnaire-modal.scss";
import questionnaireBg from "images/questionnaire-modal/questionnaire-bg.png";
class QuestionnaireModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      title: "",
      content: "",
      url: "",
      questionnaireOid: "",
    };
  }

  componentDidMount() {
    this.getQuestionnaire();
  }

  //登录之后
  getQuestionnaire = () => {
    let { userOID, tenantId, language = "zh_cn", mobile, email } = this.props.user;
    //停机公告之后，同步调用运维公告
    let account = mobile || email;
    StopAnnounceService.getQuestionnaire({ tenantId, userOID, account, language: language.toLowerCase() })
      .then((res) => {
        let data = res.data;
        if (data && data.questionnaireDTO) {
          const { title, context, url, questionnaireOid } = data.questionnaireDTO;
          if (title || context) {
            this.setState({
              visible: true,
              title,
              content: context,
              url,
              questionnaireOid,
            });
            return;
          }
        }
        this.props.afterClose();
      })
      .catch(() => {});
  };

  noMoreShowQuestionnaire = (accept) => {
    const { questionnaireOid } = this.state;
    let { tenantId, mobile, email, userOID } = this.props.user;
    let params = { tenantId, mobile, email, questionnaireOid, userOid: userOID, accept: accept === "accept" };
    StopAnnounceService.noMoreShowQuestionnaire(params)
      .then((res) => {})
      .catch(() => {});
  };

  goQuestionnaire = () => {
    const { url } = this.state;
    this.noMoreShowQuestionnaire("accept");
    window.open(url, "_blank");
  };

  onCancel = () => {
    this.setState({ visible: false });
    this.noMoreShowQuestionnaire();
    this.props.afterClose();
  };

  render() {
    const { visible, title, content } = this.state;
    return (
      <div className="questionnaire-modal">
        <Modal
          maskClosable={false}
          visible={visible}
          title={null}
          width={460}
          footer={null}
          getPopupContainer={(triggerNode) => triggerNode.parentNode}
          getContainer={() => document.getElementsByClassName("questionnaire-modal")[0]}
          onCancel={this.onCancel}
        >
          <div className="questionnaire-modal-content-wrap" style={{ backgroundImage: `url(${questionnaireBg})` }}>
            <div className="questionnaire-modal-title-content">
              <div className="questionnaire-modal-title bottom-gap">{title}</div>
              <div className="questionnaire-modal-content" dangerouslySetInnerHTML={{ __html: content }} />
            </div>
            <div className="questionnaire-modal-buttons-wrap">
              <div className="questionnaire-modal-buttons">
                <Button className="right-gap" onClick={this.onCancel}>
                  {messages("common-1.key1476") /*暂不参加，谢谢*/}
                </Button>
                <Button type="primary" onClick={this.goQuestionnaire}>
                  {messages("common-1.key1477") /*接受邀请*/}
                </Button>
              </div>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

QuestionnaireModal.propTypes = {
  afterClose: React.PropTypes.func,
};

QuestionnaireModal.contextTypes = {};
QuestionnaireModal.defaultProps = {
  afterClose: () => {}, //弹框关闭之后
};

function mapStateToProps(state) {
  return {
    user: state.login.user,
  };
}

export default connect(mapStateToProps)(QuestionnaireModal);
